<template>
	<view class="user page-main">
		<view class="title">
			<router-link :underline="false" :to="{ path: '/pages/home/index' }"><span class="arrowLeft"></span></router-link>
			<view class="name">{{$t('user.pCenter')}}</view>
			<router-link :underline="false" :to="{ path: '/pages/set/index' }"><span class="set"></span></router-link>
		</view>
		<view class="userInfor">
			<!-- {{$t('user.pCenter')}} -->
			<dl>
				<dt>
					<img src="@/static/images/user/tx1.png" class="userImg">
				</dt>
				<dd>{{nameFormat(user.username)}}<br />{{user.text}}</dd>
			</dl>
		</view>
		<view class="referralCode">
			<span>{{$t('user.referra')}}</span>
			<strong>{{user.inviterCode}}</strong>
			<span>
				<button type="default" class="copy" v-clipboard:copy="inviterCode" v-clipboard:success="onCopy">{{$t('user.copy')}}</button>
			</span>
		</view>
		<view class="userInforList">
			<ul>
				<!-- <router-link :underline="false" :to="{ path: '/pages/message/index' }"> -->
					<li @click="reLaunchToMessage">
						<span class="sound"></span>{{$t('user.msg')}}
					</li>
				<!-- </router-link> -->
				<!-- <router-link :underline="false" :to="{ path: '/pages/team/index?customerId='+this.user.customerId+'&username='+this.user.username }"> -->
				<!-- <router-link :underline="false" @click="goTeam"> -->
					<li @click="goTeam">
						<span class="team"></span>{{$t('user.team')}}
					</li>
				<!-- </router-link> -->
				<li @click="reLaunchToComputingPower">
					<span class="barchart"></span>{{$t('user.about')}}
				</li>
				<a :href="whitepaperUrl" target="_blank">
					<li>
						<span class="book"></span>{{$t('user.white')}}
					</li>
				</a>
				<router-link :underline="false" :to="{ path: '/pages/QA/index' }">
					<li>
						<span class="question"></span>{{$t('user.qa')}}
					</li>
				</router-link>
				<router-link :underline="false" :to="{ path: '/pages/onlineService/index' }">
					<li>
						<span class="customerservic"></span>{{$t('user.services')}}
					</li>
				</router-link>
			</ul>
			
		</view>
	</view>
</template>

<script>
import authMixin from '@/mixins/auth'
import { getToken } from '@/utils/auth'
import cookie from 'js-cookie'
	export default {
		data() {
			return {
				user: {},
				inviterCode: "",
				whitepaperUrl: ""
			}
		},
		created() {
		  this.configure = window.g
		},
		methods: {
			async getPersonalInfo() {
				let params = {
					token: getToken()
				}
				const {code, data} = await this.$api.login.getPersonalInfo(params)
				if(code === 200) {
					this.user = data
					this.imageUrl = data.userHead ? data.userHead : '../../static/images/photo.jpg'
					this.inviterCode=data.inviterCode
				}
			},
			goTeam() {
				uni.reLaunch({
					url: `/pages/team/index?customerId=${this.user.customerId}&username=${this.user.username}`
				})
			},// copy
			onCopy() {
				this.$message({ message: this.$t('user.copySuc'), type: 'success' })
			},
			  // copy failed
			onError() {
				this.$message.error(this.$t('user.copyFail'))
			},
			nameFormat(item) {
				if (!item) return '';
				let str = item;
				if(str.length > 4){
					str = str.toString().replace(/^(.{3}).*(.{9})$/ , '$1***$2')
				}else{}
				return str;
			},
			async whitepaper() {
				let params = {
					token: getToken(),
					type: '1'
				}
				const {code, data} = await this.$api.my.getimgType(params)
				console.log(code, data)
				if(code === 200) {
					// window.open(data.en, 'target')
					this.whitepaperUrl = this.$i18n.locale=="EN"?data.en:data.zh
				}
				
			},
			reLaunchToMessage() {
			     uni.redirectTo({
			       url: '/pages/message/index',
			       animationType: "slide-in-right",
			       animationDuration: 2000
			     })
							  
			   },
			 reLaunchToComputingPower() {
			      uni.navigateTo({
			        url: '/pages/computingPower/index',
			        animationType: "slide-in-right",
			        animationDuration: 2000
			      })
				  
			    }
		},
		mounted() {
			this.getPersonalInfo()
			this.whitepaper()
			uni.request({
			  url: '/static/images/popularize-108.png',
			  responseType: 'arraybuffer',
			  success: res => {
				const base64data = uni.arrayBufferToBase64(res.data)
				this.shareImageUrl = `data:image/png;base64,${base64data}`
			  }
			})
		}
	}
</script>

<style lang="scss" scoped>
.user {
	a{
		text-decoration: none;
		color: #333;
	}
	padding:0 40rpx;
	position: relative;
	height:100%;
	min-height:944rpx;
	background:url(@/static/images/user/userBg.png) no-repeat;
 	background-size:100% ;
	.title{
		width:100%;
		padding:20rpx;
		display: flex;
		justify-content: space-between;
		box-sizing: border-box;
		.arrowLeft{
			display: inline-block;
			background:url(@/static/images/user/back.png) no-repeat 0 10rpx;
			width:50rpx;
			height:50rpx;
			background-size:100%;
			color:#333;
		}
		.name{
			font: 500 36rpx/60rpx PingFangSC;
		}
		.set{
			display: inline-block;
			background:url('@/static/images/user/set.png') no-repeat 0 6rpx;
			width:50rpx;
			height:53rpx;
			background-size:100%;
		}
		
	}
	.userInfor{
		margin-top:60rpx;
		overflow: hidden;
		text-align: center;
		dl{
			height:300rpx;
		}
		dt{
		    margin-top: 60rpx;	
		}
		.userImg{
			width:160rpx;
			height:160rpx;
			background-size:100%;
		}
		dd{
			font:600 28rpx/20px PingFangSC;
			margin-top: 10rpx;
			color:#fff;
		}
	}
	.referralCode{
		font:400 30rpx/66rpx PingFangSC;
		padding:20rpx 40rpx;
		box-sizing: border-box;
		width:670rpx;
		background: #FFFFFF;
		box-shadow: 0px 4rpx 40rpx 0rpx rgba(109,80,223,0.1);
		border-radius: 40rpx;
		text-align: center;
		margin-top:52rpx;
		span{
			display: block;
			color: #666666;
			line-height:80rpx;
		}
		strong{
			color: #333333;
			font-size: 40px;
			font:600 60rpx/66rpx Gilroy-HeavyItalic, Gilroy;
			font-style: oblique;
		}
	}
	.copy{
		margin-top:24rpx;
		width: 120rpx;
		height:60rpx;
		line-height:60rpx;
		background: #6D50DF;
		border-radius:50rpx;
		font-size:26rpx;
		color: #fff;
		font-family:"PingFangSC";
	}
	.userInforList{
		width: 95%;
		margin:40rpx auto;
		ul {
			margin-top:30rpx;
			li{
				width: 100%;
				height:100rpx;
				line-height:100rpx;
				color: #333;
				font-size:32rpx;
				position: relative;
				span{
					display: inline-block;
					vertical-align: baseline;
					margin:-10rpx 16rpx;
				}
				.sound{
					background:url('@/static/images/user/sound.png') no-repeat;
					width:38rpx;
					height:38rpx;
					background-size:100%;
				}
				.team{
					background:url('@/static/images/user/team.png') no-repeat;
					width:38rpx;
					height:38rpx;
					background-size:100%;
				}
				.barchart{
					background:url('@/static/images/user/barchart.png') no-repeat;
					width:38rpx;
					height:38rpx;
					background-size:100%;
				}
				.book{
					background:url('@/static/images/user/book.png') no-repeat;
					width:38rpx;
					height:42rpx;
					background-size:100%;
				}
				.question{
					background:url('@/static/images/user/question.png') no-repeat;
					width:38rpx;
					height:38rpx;
					background-size:100%;
				}
				.customerservic{
					background:url('@/static/images/user/customerservic.png') no-repeat;
					width:38rpx;
					height:38rpx;
					background-size:100%;
				}
			}
			li:after{
				position: absolute;
				top:44rpx;
				right:32rpx;
				display: inline-block;
				content:'';
				width:12rpx;
			    height:12rpx;
			    border-top: 1px solid #999999;
			    border-right: 1px solid #999999;
			    transform:  rotate(45deg)
			}
		}
	}
}
</style>
